<template>
	<view class="uiwu">
		<view class="uiwu-box">
			<view class="top">
				<navigator hover-class="none" url="/pages/member/record">开通记录</navigator>
				<view class="in uiwu-flex-space">
					<image class="left" src="/static/nvhai.png" mode="aspectFill"></image>
					<view class="name uiwu-flex-column">
						<text>Mi Manchi</text>
						<text v-if="!userInfo.is_vip">尚未开通VIP会员</text>
						<text v-else>{{uiwu.formatTimestamp(userInfo.vip_expire_time * 1000)}}到期</text>
					</view>
					<image class="right" src="/static/huangguan.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list">
				<image @tap.stop="uiwu.openWindow('/pages/member/equity')" src="/static/detalgantanhao.png" mode="widthFix"></image>
				<view class="title">会员专享权益</view>
				<view class="list-item uiwu-flex">
					<view v-for="(item,index) in member_right" :key="index" class="item uiwu-flex-column">
						<text>{{item.show_title}}</text>
						<text>{{item.explain}}</text>
					</view>
				</view>
			</view>
		</view>
		<uiwu-payment-model :isCoupon="false" v-model="showModel" @confirm="confirm" />
		<uiwu-footer>
			<view class="uiwu-footer">
				<view class="uiwu-footer-box">
					<text class="uiwu-flex-center" @tap.stop="showModel=true">立即开通￥{{member_ship.price}}/月 ￥{{member_ship.pre_price}}</text>
					<text></text>
				</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
	import { useStore } from 'vuex';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref , toRef , inject} from "vue";
	import { memberlist, memberActivate , userInfo as userData} from "../../api/api";
	import { uiwu } from "../../config/config";
	const store = inject<any>('store');
	const userInfo = toRef(store.state,'userInfo')
	const showModel = ref<boolean>(false)
	const member_right = ref<Array<object>>([])
	const member_ship = ref<object>({})
	const storeVuex = useStore();
	const increment = (data,type) => {
	    storeVuex.commit(type, data);
	};
	const getMemberlist = async () : Promise<any> => {
		const { data } = await memberlist();
		member_right.value = data.member_right;
		member_ship.value = data.member_ship
	}
	const getUserInfo = async () => {
		const {data} = await userData();
		increment(data,'set_user')
	}
	const confirm = async (pay_type) : Promise<any> => {
		uiwu.loading('支付中...',true)
		let code = null;
		if(pay_type == 'weixin') code = await getWeiXinCode()
		const {data:{pay_info}} = await memberActivate({
			member_ship_id:member_ship.value.id,
			pay_type,
			routine_code:code
		})
		if(!pay_info) return
		if(pay_type != 'weixin'){
			uiwu.ailpay(pay_info).then((res)=>{
				uiwu.hideloading()
				setTimeout(()=>{
					uiwu.toast('支付成功')
					getUserInfo()
				})
			}).catch(()=>{
				uiwu.hideloading()
				uiwu.toast('支付取消')
			})
		}else{
			uiwu.wxpay(pay_info).then((res)=>{
				uiwu.hideloading()
				setTimeout(()=>{
					uiwu.toast('支付成功')
					getUserInfo()
				})
			})
		}
	}
	/**
	 * 获取code
	 */
	const getWeiXinCode = () => {
		return new Promise((resolve,reject)=>{
			uni.login({
				provider:'weixin',
				success: ({code}) => {
					resolve(code)
				},
				fail: (err) => {
					reject(err)
				}
			})
		})
	}
	onLoad(()=>{
		getMemberlist()
	})
</script>

<style lang="scss">
	.uiwu{
		padding: 0 24rpx;
		position: relative;
		&::after{
			content: "";
			position: absolute;
			width: 100%;
			height: 124rpx;
			background: #272323;
			left: 0;
			top: 0;
			right: 0;
		}
	}
	.uiwu-box{
		width: 100%;
		height: 770rpx;
		background: url('../../static/member.png') no-repeat 0 0;
		background-size: 100% 100%;
		position: relative;
		z-index: 9;
		.top{
			padding-top: 60rpx;
			padding: 60rpx 51rpx 0 56rpx;
			navigator{
				text-align: right;
				color: #FFF;
				font-size: 24rpx;
			}
			.in{
				.left{
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}
				.name{
					flex: 1;
					margin-left: 24rpx;
					text{
						font-size: 36rpx;
						font-weight: 800;
						color: #FFFFFF;
						&:nth-child(2){
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
						}
					}
				}
				.right{
					width: 140rpx;
				}
			}
		}
		.list{
			margin-top: 108rpx;
			padding: 0 21rpx;
			position: relative;
			image{
				width: 40rpx;
				position: absolute;
				right: 20rpx;
				top: -10rpx;
			}
			.title{
				font-size: 36rpx;
				font-weight: 800;
				color: #231815;
				text-shadow: 0px 3rpx 0px #FAC500;
				text-align: center;
				margin-bottom: 32rpx;
			}
			&-item{
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: 318rpx;
					height: 116rpx;
					padding-left: 122rpx;
					background: no-repeat 0 0;
					background-size: 100% 100%;
					justify-content: center;
					padding-bottom: 20rpx;
					margin-bottom: 22rpx;
					&:nth-child(1){
						background-image: url('../../static/libao.png');
					}
					&:nth-child(2){
						background-image: url('../../static/kefuhuiy.png');
					}
					&:nth-child(3){
						background-image: url('../../static/hiuyuanbiaos.png');
					}
					text{
						font-size: 28rpx;
						font-weight: 800;
						color: #231815;
						&:nth-child(2){
							margin-top: 4rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #666666;
						}
					}
				}
			}
		}
	}
	.uiwu-footer{
		width: 100%;
		padding: 15rpx 24rpx;
		&-box{
			position: relative;
			width: 100%;
			height: 88rpx;
			text{
				width: 100%;
				height: 88rpx;
				background: #EF821E;
				border-radius: 40rpx;
				border: 3rpx solid #231815;
				position: absolute;
				left: -5rpx;
				top: -6rpx;
				z-index: 9;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				&:nth-child(2){
					z-index: 8;
					left: 5rpx;
					top: 6rpx;
					background: #FAC500;
				}
			}
		}
	}
</style>
